<!--  -->
<template>
  <div class="order-list">
      <HeaderTop title="订单列表"></HeaderTop>
      <div class="order-container">
        <div class="order-search">
          <div class="order-name">
            <span class="title">受益人姓名：</span>
            <el-input class="input" v-model="value1"></el-input>
          </div>
          <el-button class="order-btn" plain @click='search'>搜索</el-button>
        </div>

        <div class="order-mian">
          <!-- 订单表格 -->
          <el-table max-height="700" class="order-table" v-loading="loading" :data="tableData" style="width: 100%" :span-method="objectSpanMethod">
            <el-table-column prop="ordernum" label="订单编号"></el-table-column>
            <el-table-column prop="goods" label="商品"></el-table-column>
            <el-table-column prop="buyer" label="买家"></el-table-column>
            <el-table-column prop="paymoney" label="实付款(元)"></el-table-column>
            <el-table-column prop="finishtime" label="订单完成时间"></el-table-column>
            <el-table-column prop="receiptor" label="收益人"></el-table-column>
            <el-table-column prop="bonus" label="奖金金额(元)"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block">
            <el-pagination class='pagination' v-if='tableData&&tableData.length>0'
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="num"
              layout="total, prev, pager, next, jumper"
              :page-size="size"
              :total="totalSize">
            </el-pagination>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
export default {
  data () {
    return {
      currentPage1: 5,
      value1:'',
      userId:sessionStorage.getItem('userId'),
      token:sessionStorage.getItem('token'),
      num:1,
      size:10,
      totalSize:0,
      tableData:[],
      loading:true
    }
  },

  components: {
    HeaderTop
  },

  computed: {},
  created(){
    this.getIncomeDetailList();
  },
  methods: {
    async getIncomeDetailList(){
      console.log(1)
      let params = {
        token: sessionStorage.getItem('token'),
        managerInfoId:this.userId,
        // token:this.token,
        incomeUserName:this.incomeUserName,
        num:this.num,
        size:this.size,
        managerInfoId:sessionStorage.getItem('userId')
      }
      const result = await this.API.reqIncomeDetailList(params)
      if(result.retCode == '000'){
        this.tableData = result.retData;
        this.loading = false;
      }
    },
    search(){
      this.incomeUserName = this.value1
      this.getIncomeDetailList();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      // 合并单元格逻辑
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.num = val
      this.getIncomeDetailList();
    }
  }
}

</script>
<style lang='stylus'>
  .ivu-modal-mask
    background rgba(210,210,210,.1)
  .ivu-modal-content
    overflow hidden
    .ivu-modal-header
      padding 0
      border none
      span
        margin-left 10px
        font-weight bold
    .ivu-modal-footer
      border none
</style>

<style lang='stylus' scoped>
.order-list
  height 100%
  .order-container
    height 100%
    .order-search
      height 90px
      display flex
      align-items center
      .order-name
        display flex
        align-items center
        .title
          color #fff
          font-size 19px
        .input
          width 127px
      .order-btn
        margin-left 25px
    .order-mian
      position relative
      height 763px
      .order-table
        border-top-left-radius 15px
        border-top-right-radius 15px
        .main
          color red
      .block
        position absolute
        bottom 10px
        margin-left 400px
.pagenation 
  posItion absolute 
  bottom 20px
  left 50%
  transform  translateX(-50%)
</style>